import { DrawerForm } from '@ant-design/pro-form';
import { Divider, Image, Typography } from 'antd';

interface OffEdgeDrawerProps {}

const OffEdgeDrawer: React.FC<OffEdgeDrawerProps> = () => {
  return (
    <DrawerForm
      key="close"
      title="Edge 关闭（在浏览器中打开 Office 文件）"
      trigger={
        <div
          style={{
            paddingTop: '15px',
          }}
        >
          注意事项：如果您使用Edge浏览器，建议您
          <a>关闭（在浏览器中打开 Office 文件）此功能</a>
        </div>
      }
      autoFocusFirstInput
      drawerProps={{
        size: 'large',
        forceRender: true,
        destroyOnClose: true,
      }}
      submitter={false}
    >
      <Typography.Title level={3}>
        1、打开Egde浏览器，点击右上角【三个小点】 ,打开菜单
      </Typography.Title>
      <Image src="https://xtbs.ljsyy.net/resources/offEgdeDownloadOffice/off-1.png" />
      <Divider />
      <Typography.Title level={3}>2、选择最下方，点击【设置】</Typography.Title>
      <Image src="https://xtbs.ljsyy.net/resources/offEgdeDownloadOffice/off-2.png" />
      <Divider />
      <Typography.Title level={3}>3、在左侧，找到【下载】栏目</Typography.Title>
      <Image src="https://xtbs.ljsyy.net/resources/offEgdeDownloadOffice/off-3.png" />
      <Divider />
      <Typography.Title level={3}>
        4、在右侧，找到【在浏览器中打开 Office 文件】，右边开关可关闭
      </Typography.Title>
      <Image src="https://xtbs.ljsyy.net/resources/offEgdeDownloadOffice/off-4.png" />
    </DrawerForm>
  );
};

export default OffEdgeDrawer;
